<template>
  <div id="ecologicalPointDetailed">
    <c-title :hide="false" :text="balanceLang + '明细'"></c-title>
    <div class="background_box"></div>
    <div class="statusBox">
      <div class="statusBox_left">
        <div class="txt" :class="statusValue == 0 ? 'showtxt' : ''" @click="selectStatus(0)">全部</div>
        <div class="txt" :class="statusValue == 1 ? 'showtxt' : ''" @click="selectStatus(1)">收入</div>
        <div class="txt" :class="statusValue == 2 ? 'showtxt' : ''" @click="selectStatus(2)">支出</div>
      </div>
      <div class="statusBox_right" @click.stop="selectShow = !selectShow">
        <div class="txt">{{ serviceTypeList[selectTapInd] }}</div>
      </div>
    </div>
    <div class="list" :key="index">
      <div class="lis" v-for="(info, index) in record_list" :key="index">
        <div class="lisTop">
          <div class="txtName">{{ info.source_name }}</div>
          <div class="price">{{ info.change_type == 1 ? "+" : "-" }}{{ info.amount }}</div>
        </div>
        <div class="lisTop dob">
          <div class="time">{{ info.created_at }}</div>
          <div class="balance">剩余：{{ info.present }}</div>
        </div>
      </div>
    </div>
    <van-popup v-model="selectShow" position="bottom" :style="{ height: '40%' }">
      <div class="typeBox">
        <div class="lis" :class="index == selectType ? 'lisBg' : ''" v-for="(item, index) in serviceTypeList" :key="item.id" @click="selectTap(item, index)">
          <div class="txt">{{ item }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      //余额字样
      balanceLang: "生态积分",
      statusValue: 0,
      // 筛选类型 弹窗
      selectShow: false,
      selectType: 0,
      record_list: [],
      // 筛选类型数组
      serviceTypeList: [],
      selectTapInd: 0,

      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  methods: {
    selectStatus(key) {
      this.init();
      this.statusValue = key;
      this.getData();
    },
    selectTap(key, ind) {
      this.init();
      console.log(key, ind);
      this.selectType = ind;
      this.selectTapInd = ind;
      this.getData();
    },

    init() {
      this.isLoadMore = true;
      this.page = 1;
      this.total_page = 0;
      this.record_list = [];
    },
    getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = { source_id: this.selectType, change_type: this.statusValue, page: this.page };
        $http.post("plugin.ecological-point.frontend.modules.point.controllers.records.index", json).then(response => {
          if (response.result === 1) {
            var nextPageData = response.data.page_list.data;
            this.record_list = this.record_list.concat(nextPageData);
            this.isLoadMore = true;
          } else {
            this.page = this.page - 1;
            this.isLoadMore = false;
          }
        });
      }
    },
    getData() {
      $http
        .post("plugin.ecological-point.frontend.modules.point.controllers.records.index", { page: this.page, source_id: this.selectType, change_type: this.statusValue }, "加载中")
        .then(response => {
          if (response.result === 1) {
            this.ecologicalName = JSON.parse(localStorage.getItem("yz_basic_info")).ecological_point ? JSON.parse(localStorage.getItem("yz_basic_info")).ecological_point : "生态积分";
            this.fun.setWXTitle(`${this.ecologicalName}明细`);
            this.record_list = response.data.page_list.data;
            this.source_comment = response.data.source_comment;
            this.isLoadMore = true;
            this.total_page = response.data.page_list.last_page;
            this.serviceTypeList = response.data.source_comment;
            this.serviceTypeList[0] = "业务类型";
            if (!this.total_page) {
              this.total_page = 0;
            }
          } else {
            this.page = this.page - 1;
            this.isLoadMore = false;
          }
        });
    }
  },
  activated() {
    this.getData();
    this.balanceLang = JSON.parse(localStorage.getItem("yz_basic_info")).ecological_point?JSON.parse(localStorage.getItem("yz_basic_info")).ecological_point:'生态积分';
  }
};
</script>
<style lang="scss" scoped>
.listTxt {
  padding: 2rem 0;
}

@keyframes ident {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.75;
  }

  100% {
    opacity: 1;
  }
}

.showPosBox {
  animation: ident 0.5s;
}

.background_box {
  color: #382c0a;
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--themeBaseColor)), to(#f5f5f5));
  background-image: -webkit-linear-gradient(var(--themeBaseColor), #f5f5f5);
  background-image: linear-gradient(var(--themeBaseColor), #f5f5f5);
  min-height: 9.25rem;
  padding: 1.5938rem 1.0938rem 0 1.0938rem;
}

.statusBox {
  margin: 0 0.625rem;
  margin-top: -7rem;
  margin-bottom: 0.625rem;
  display: flex;
  justify-content: space-between;
  z-index: 1;
  position: relative;

  .statusBox_left {
    display: flex;
    font-size: 0.75rem;
    color: #262626;

    .txt {
      line-height: 1.875rem;
      width: 3.75rem;
    }

    .showtxt {
      width: 3.75rem;
      height: 1.875rem;
      background: #fff;
      border-radius: 0.9375rem;
    }
  }

  .statusBox_right {
    min-width: 5.3125rem;
    height: 1.875rem;
    background: #fdefbd;
    border-radius: 0.3125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.4688rem;
    position: relative;

    .txt {
      flex: 1;
      text-align: center;
    }

    .statusBox_right_pos {
      background: #fdefbd;
      position: absolute;
      bottom: -4.3rem;
      left: 0;
      width: 100%;
      z-index: 22222222;
      border-radius: 0 0 0.3125rem 0.3125rem;

      .postxt {
        height: 1.5rem;
        line-height: 1.5rem;
      }
    }
  }
}

.list {
  margin: 0 0.625rem;
  padding: 0 0.875rem;
  margin-top: 0.9375rem;
  background: #fff;
  border-radius: 0.625rem;
  margin-bottom: 0.625rem;

  .lis:first-child {
    border: none;
  }

  .lis {
    display: flex;
    flex-direction: column;
    padding: 0.9375rem 0;
    border-bottom: 1px solid #f6f6f6;

    .dob {
      margin-top: 0.4688rem;
    }

    .lisTop {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .txtName {
        font-size: 14px;
      }

      .price {
        font-size: 14px;
        font-weight: 500;
        color: #f20606;
      }

      .time {
        font-size: 0.6875rem;
        color: #999;
      }

      .balance {
        font-size: 0.6875rem;
        font-weight: 400;
        color: #666;
      }
    }
  }
}

.timeSelect {
  margin-top: -5rem;
}

.timeSelect {
  height: 2.5rem;
  background: #fff;
  border-radius: 0.625rem;
  margin: 0 0.625rem;
  display: flex;
  padding: 0 0.9063rem;
  align-items: center;
  position: sticky;
  top: 40px;

  .timeBox {
    flex-shrink: 0;
    display: flex;
    align-items: center;

    .time {
      margin-right: 0.5rem;
      font-size: 0.8125rem;
    }
  }

  .totalNum {
    flex: 1;
    text-align: right;
    font-size: 14px;
    color: #333;
  }
}

.typeBox {
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0.625rem;
  padding-top: 1rem;

  .lis {
    width: 30%;
    padding: 0.6rem 0.625rem;
    border-radius: 0.1563rem;
    background: #9999;
    margin-right: 1rem;
    margin-bottom: 0.625rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .txt {
      font-size: 12px;
    }
  }

  .lis:nth-child(3n) {
    margin-right: 0;
  }

  .lisBg {
    background: var(--themeBaseColor) !important;
  }
}
</style>
